<!--
Copyright 2012 Ufonzak.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html  xmlns:wicket="http://wicket.apache.org">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
    <wicket:extend>
        <script>
            window.onload = function() {
                
            };
                 
            $(document).ready(function(){                
            });
        
            $(function() {            
                $( "#flight_from_inp" ).datepicker({ dateFormat: "d. mm. yy" });
                $( "#flight_to_inp" ).datepicker({ dateFormat: "d. mm. yy" });
            });   
            
            function autoComplLabel(name, reqname, mapper)
            {
                $( "#" + name ).autocomplete({
                    source: function( request, response ) {
                        $.getJSON(
                        "JSONRequests",
                        {q:reqname, data:request.term}   ,
                        function(data, text) { 
                            if (text != "success")
                                return;
                            response( $.map( data, mapper));
                        }
                    );
                    },
                    minLength: 0,
                    select: function( event, ui ) {                    
                        document.getElementById(name + "_id").setAttribute("value", ui.item ? ui.item.tag.id : "");
                    }           
                }).focus(function() {
                    $(this).autocomplete("search");
                });
            };
            
            function rebuildStewardIds()
            {
                var ids = "";
                stews = $("#stewards")[0].getElementsByTagName("tr");
                for (var i = 0; i < stews.length; i++)
                {
                    ids += stews[i].getAttribute("id").substr("stew_".length) + ";";
                }
                $("#steward_inp_id")[0].setAttribute("value", ids);
            };
            
            function addSteward(stewardObject)
            {
                var stew_id =  stewardObject.id;
                var button_remove;
                var stew_label = stewardObject.firstName + " " + stewardObject.lastName + " (" + stewardObject.personalId +")";
                $("#stewards").append(
                $("<tr/>", {
                    id : "stew_" + stew_id
                }).append(
                $("<td/>", {
                    html : stew_label,
                    style : "width:100%; padding:3px"
                })
                .after($("<td/>", {
                    style : "text-align:right"
                }) 
                .append(button_remove = $("<img/>", {
                    id : "stew_rem_" + stew_id,
                    "class" : "ico",
                    src : "Images/delete.png"
                })))
            )
            );
                        
                button_remove[0].onclick = function(){
                    node = $( "#stew_" + stew_id )[0];
                    node.parentNode.removeChild(node);
                    rebuildStewardIds();
                }; 
            }
            
            function mapStewards(stewards) 
            {
                return $.map( stewards, function( item ) {
                    return {
                        label: item.firstName + " " + item.lastName + " (" + item.personalId +")" ,
                        value: item.firstName + " " + item.lastName + " (" + item.personalId +")",
                        tag: item
                    }                        
                }) 
            };
            
            $(function(){               
                            
                autoComplLabel("aircraft_inp","aircraft", function( item ) {
                    return {
                        label: item.code + " , type: " + item.type + ", capacity:" + item.capacity,
                        value: item.code,
                        tag: item
                    }                        
                });
                
                autoComplLabel("destFrom_inp","destination",  function( item ) {
                    return {
                        label: item.city + " (" + item.code + ") " + item.destinationState ,
                        value: item.city,
                        tag: item
                    }                        
                });
                
                autoComplLabel("destTo_inp","destination",  function( item ) {
                    return {
                        label: item.city + " (" + item.code + ") " + item.destinationState ,
                        value: item.city,
                        tag: item
                    }                        
                });
                
                $( "#steward_inp" ).autocomplete({
                    source: function( request, response ) {
                        $.getJSON(
                        "JSONRequests",
                        {q:"steward", data:request.term}   ,
                        function(data, text) { 
                            if (text != "success")
                                return;
                            response( mapStewards(data) );
                        }
                    );
                    },
                    minLength: 0,
                    select: function( event, ui ) {
                        event.preventDefault();
                        
                        if (ui.item)
                        {
                            addSteward(ui.item.tag);
                                                
                            rebuildStewardIds();
                        }
                        
                        $(this).val(''); 
                    }           
                }).focus(function() {
                    $(this).autocomplete("search");
                });
                                
            });
            
            
            $(function(){ 
                
                //determine editing
                flight_id = $("#flight_id")[0].getAttribute("value");
                if (flight_id)
                    showEditTool();
            
                stew_ids_str = $("#steward_inp_id")[0].getAttribute("value");
                if (stew_ids_str)
                {   
                    $.getJSON(
                    "JSONRequests",
                    {q:"steward_ids", data:stew_ids_str},
                    function(data, text) {
                        $("#steward_loader")[0].setAttribute("hidden", "true");
                    
                        if (text != "success")
                            return;
                        
                        stewards = mapStewards(data);
                        for(var i = 0; i < stewards.length; i++)
                            addSteward(stewards[i].tag)
                    });
                }
                else
                {
                    $("#steward_loader")[0].setAttribute("hidden", "true");
                }
            });
            
            function showEditTool() { $("#editformdiv").show("slow"); $("#showeditdiv").hide(); };
            
            
            $(function(){
                var shown = false;
                
                $("td.flightrow").mouseleave(function(eventargs){ 
                    if (!shown)
                        return;
                    
                    shown = false;
                        
                    $("#flght_tooltip").hide("slow");
                });       
        
                $("td.flightrow").click(function(eventargs){ 
                    if (shown)
                        return;
                    
                    shown = true;
            
                    var pos = $("#flight_data").offset();
                    
                    $("#flght_tooltip")
                    .css("left",  (eventargs.pageX - pos.left + 20) + "px") 
                    .css("top",  (eventargs.pageY - pos.top) + "px");
                    
                    $("#flght_tooltip").html('<img src="Images/ajax-loader.gif"/>');
                
                    var flId = $(this)[0].parentElement.getElementsByTagName("td")[1].getElementsByTagName("span")[0].innerHTML;
                                        
                    $.getJSON(
                    "JSONRequests",
                    {q:"flight_id", id:flId },
                    function(data, text) {
                    
                        if (text != "success")
                            return;
                        
                        if (data.arrival.minute == "0")
                            data.arrival.minute = "00";
                        if (data.departure.minute == "0")
                            data.departure.minute = "00";
                        
                        $("#flght_tooltip").html(Mustache.render($("#tooltip_temp").html(), data));
                        
                        var scr_bott = $(window).height() + $(window).scrollTop();
                        var par_bott = $("#flght_tooltip").parent().offset().top + $("#flght_tooltip").parent().height();
                        var bott = $("#flght_tooltip").offset().top + $("#flght_tooltip").innerHeight();
                                       
                        var diff = (bott - scr_bott) > (bott - par_bott) ? (bott - scr_bott) : (bott - par_bott);
                        if (diff > 0)
                            $("#flght_tooltip").css("top", ((eventargs.pageY - pos.top) - diff - 5) + "px");
                    });
                    
                    $("#flght_tooltip").show("slow");
                });
            
            });

                   
        </script>

        <div class="post">

            <div class="posttitle">
                <h2><wicket:message key="title">Flights</wicket:message></h2>
            </div>

            <p wicket:id="info">Prihlaste se</p>
            <a wicket:id="showForm" id="showeditdiv" onclick="showEditTool()"><img class="ico" src="Images/add.png"/></a>

            <div id="editformdiv"  style="display: none">
                <form wicket:id="flightForm" class="editform">
                    <fieldset>
                        <legend><h4><span wicket:id="heading">Form Name</span></h4></legend>
                        <input id="flight_id" type="text" wicket:id="flight_id" hidden="true">
                        <table>
                            <tr>
                                <td><wicket:message key="form.departure">Departure</wicket:message>:</td>
                            <td><input wicket:id="flight_from_inp" id="flight_from_inp" type="text" /></td>              
                            <td><input wicket:id="flight_from_inp_t" id="flight_from_inp_t" type="text" value="10:00" /></td>            
                            </tr>
                            <tr>
                                <td><wicket:message key="form.arrival">Arrival</wicket:message>:</td>
                            <td><input wicket:id="flight_to_inp" id="flight_to_inp" type="text"  /></td>  
                            <td><input wicket:id="flight_to_inp_t" id="flight_to_inp_t" type="text" value="20:00" /></td>                
                            </tr>
                            <tr>
                                <td><wicket:message key="form.aircraft">Aircraft</wicket:message>:</td>
                            <td colspan="2">
                                <input wicket:id="aircraft_inp" id="aircraft_inp" type="text"/>  
                                <input wicket:id="aircraft_inp_id" id="aircraft_inp_id" hidden="true" />  
                            </td>
                            </tr>

                            <tr>
                                <td><wicket:message key="form.from">From</wicket:message>:</td>
                            <td colspan="2">
                                <input wicket:id="destFrom_inp" id="destFrom_inp" type="text"/>  
                                <input wicket:id="destFrom_inp_id" id="destFrom_inp_id" hidden="true" />
                            </td>  
                            </tr>


                            <tr>
                                <td><wicket:message key="form.to">To</wicket:message>:</td>
                            <td colspan="2">
                                <input wicket:id="destTo_inp" id="destTo_inp" type="text"/>  
                                <input wicket:id="destTo_inp_id" id="destTo_inp_id" hidden="true" />
                            </td> 
                            </tr>


                            <tr>
                                <td><wicket:message key="form.stewards">Stewards</wicket:message>:</td>
                            <td colspan="2">
                                <input wicket:id="steward_inp" id="steward_inp" type="text"/>
                                <input wicket:id="steward_inp_id" id="steward_inp_id" hidden="true"/>
                            </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td colspan="2">
                                    <span id="steward_loader"> <img src="Images/ajax-loader.gif"/></span>
                                    <table id="stewards">

                                    </table>
                                </td>
                            </tr>

                            <tr>
                                <td></td>
                                <td colspan="2" style="text-align: right">
                                    <input wicket:id="buttonOk" id="buttonOk" type="submit" wicket:message="value:form.Ok" /> 
                                    <input wicket:id="buttonCancel" id="buttonCancel" type="submit" wicket:message="value:form.Cancel" />
                                </td>               
                            </tr>
                        </table>
                    </fieldset>
                </form>
            </div>

            <span id="tooltip_temp" style="display: none">
                <table>
                    <tr>
                        <td><wicket:message key="form.from"/>: </td>
                    <td>{{flightFrom.city}} ({{flightFrom.code}}) {{flightFrom.destinationState}}</td>
                    </tr>
                    <tr>
                        <td><wicket:message key="form.to"/>: </td>
                    <td>{{flightTo.city}} ({{flightTo.code}}) {{flightTo.destinationState}}</td>
                    </tr>
                    <tr>
                        <td><wicket:message key="form.departure"/>: </td>
                    <td>{{departure.dayOfMonth}}.{{departure.month}}.{{departure.year}} {{departure.hourOfDay}}:{{departure.minute}}</td>
                    </tr>
                    <tr>
                        <td><wicket:message key="form.arrival"/>: </td>
                    <td>{{arrival.dayOfMonth}}.{{arrival.month}}.{{arrival.year}} {{arrival.hourOfDay}}:{{arrival.minute}}</td>
                    </tr>
                    <tr>
                        <td><wicket:message key="form.aircraft"/>: </td>
                    <td>{{aircraft.code}} (<wicket:message key="aircraft.newType"/>: {{aircraft.type}} <wicket:message key="aircraft.newCapacity"/>: {{aircraft.capacity}}) </td>
                    </tr>
                    <tr>
                        <td><wicket:message key="form.stewards"/>: </td>
                    <td> 
                        {{#stewards}}
                        {{firstName}} {{lastName}} ({{personalId}})<br/>
                        {{/stewards}}
                    </td></tr>

                </table>
            </span>

            <div id="flight_data" class="data" style="position: relative">
                <span id="flght_tooltip" class="tooltip" style="display: none">

                </span>

                <p wicket:id="error"></p>
                <table class="datatable">
                    <tr wicket:id="header">
                        <th style="border-width: 0px"></th>
                        <th><wicket:message key="id">ID</wicket:message></th>
                        <th><wicket:message key="form.from">From</wicket:message></th>
                        <th><wicket:message key="form.to">To</wicket:message></th>
                        <th><wicket:message key="form.aircraft">Plane</wicket:message></th>
                        <th><wicket:message key="form.departure">Departure</wicket:message></th>
                        <th><wicket:message key="form.arrival">Arrival</wicket:message></th>
                        <th><wicket:message key="form.stewards">Stewards</wicket:message></th>
                        <th style="border-width: 0px"></th>
                    </tr>
                    <tr wicket:id="flights">
                        <td class="flightrow"><img class="ico" src="Images/search.png"/></td>
                        <td class="flightrow"><span wicket:id="flight_id">[flight_id]</span></td>
                        <td class="flightrow"><span wicket:id="flight_from">[flight_from]</span></td>
                        <td class="flightrow"><span wicket:id="flight_to">[flight_to]</span></td>
                        <td class="flightrow"><span wicket:id="flight_plane">[flight_plane]</span></td>
                        <td class="flightrow"><span wicket:id="flight_depart">[flight_depart]</span></td>
                        <td class="flightrow"><span wicket:id="flight_arri">[flight_arri]</span></td>
                        <td class="flightrow"><span wicket:id="stew_count">[stew_count]</span></td>
                        <td>
                            <a wicket:id="edit_flight"><img class="ico" src="Images/pero.png"/></a>
                            <a wicket:id="delete_flight"><img class="ico" src="Images/delete.png"/></a>
                        </td>
                    </tr>

                </table>
            </div>
        </div>
    </wicket:extend>
</body>
</html>
